<template>
	<div v-loading="loading" class="home-view">
		<div class="echart" ref="echartContainer"></div>
	</div>
</template>

<script lang='ts' setup>
import { onMounted, ref, shallowRef, watch } from 'vue';
import { useRoute } from 'vue-router';
import API from '../api/home';
import * as echarts from 'echarts';
import dayjs from 'dayjs';
import countTmpData from './countTmp.json';

const loading = ref(false);
const route = useRoute();
let echartContainer = ref(null);
let echart = shallowRef();
const source = ref<string[]>([]);

type Source = {
    [key: string]: string,
}
const SOURCE: Source  = {
	ecjhList: '集合预报',
	ecncList: 'EC',
	nwgdList: '国家指导',
	otsList: 'OTS',
	dafList: 'T-DAF'
};

interface DataList {
    date: string;
    value: number;
}

interface ResponseData {
    dafList: DataList[];
    otsList: DataList[];
    ecjhList: DataList[];
    ecncList: DataList[];
    nwgdList: DataList[];
}

onMounted(() => {
    countTmp();
})

watch(() => route.query.queryTime, (newVal, oldVal) => {
	console.log('watch queryTime======>', newVal);
	newVal && countTmp();
});


watch(() => route.query.lon, (newVal, oldVal) => {
	console.log('watch lon======>', newVal);
	newVal && countTmp();
});

watch(() => route.query.source, (newVal, oldVal) => {
	console.log('watch source======>', newVal);
	newVal && countTmp();
});

const countTmp = async () => {
	
	source.value = ['ecjhList', 'ecncList', 'nwgdList', 'otsList', 'dafList'];
	if (echart.value && echart.value.dispose) {
		echart.value.dispose();
	}
	echart.value = echarts.init(echartContainer.value);
	try {
		loading.value = true;
		// let res: { data: { data: ResponseData, code: number } } = await API.countTmp({
		// 	element: 'TMP',
		// 	queryTime: route.query.queryTime,
		// 	lon: route.query.lon,
		// 	lat: route.query.lat,
		// });
		let res = await Promise.resolve({data: countTmpData});
		
		let { data, code } = res.data;
		if (code === 200) {
			let legendData: string[] = [];
			let series: Array<{}> = [];
			source.value.forEach(el => {
				legendData.push(SOURCE[el]);
				let obj = {
					name: SOURCE[el],
					type: ['ecjhList', 'ecncList'].includes(el) ? 'bar' : 'line',
					smooth: true,
					data: (data[el] as DataList[]).map(item => item.value),
				};
				series.push(obj);
			});
			console.log('series======>', series);
			let xAxisData = data.ecjhList.map(el => dayjs(el.date, 'YYYYMMDDHH0000').format('DD日HH时'));
			let option = {
				title: {
					text: '会商供暖'
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: legendData,
					selectedMode: false // 禁用图例点击交互
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: 80,
					containLabel: true
				},
				toolbox: {
					feature: {
						saveAsImage: {}
					}
				},
				dataZoom: [
					{
						show: true,
						realtime: true,
						start: 0,
						end: 10
					},
					{
						type: 'inside',
						realtime: true,
						start: 0,
						end: 10
					}
				],
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: xAxisData
				},
				yAxis: {
					type: 'value'
				},
				series: series
			};
			echart.value.setOption(option);
		} else {
			console.error('countTmp暂无数据');
		}
	} catch (error) {
		console.error(error);
	} finally {
		loading.value = false;
	}
}
</script>

<style lang='scss' scoped>
.home-view {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;

	.echart {
		height: 80%;
		width: 80%;
	}
}
</style>
